import React, { useState } from 'react';
import './Login.css';
import OutLogin from './OutLogin';
import Login from './index';
import RegisterType from './RegisterType';
import RegisterForm from './RegisterForm';
import type { FormConfig } from '../DynamicForm';

// 定义视图类型
export type ViewType = 'login' | 'registertype' | 'outlogin' | 'registerform' | 'other';
export interface LoginLayoutProps {
  /** 右侧要显示的内容 */
  content?: React.ReactNode;
  /** 左侧Logo文本 */
  logoText?: string;
  /** 左侧描述文本 */
  descriptionText?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
  /** 自定义类名 */
  className?: string;
  /** 统一身份认证的跳转链接 */
  ssoLoginUrl?: string;
  /** 当前视图 */
  currentView: ViewType;
  /** 切换视图的回调函数 */
  onViewChange?: (view: ViewType) => void;
  /** 其他登录方式类型数组 */
  otherLoginTypes?: Array<{
    key: string;
    name: string;
    icon: React.ReactNode;
    onClick: () => void;
  }>;
  /** 左侧背景图片 */
  leftBackgroudImg?: string;
  /** 左侧Logo图片 */
  logoUrl?: string;
  /** 校外登录提交回调 */
  outLoginSubmit?: (values: any) => void;
  /** 注册类型列表 */
  registerTypeList: Array<{
    key: string;
    name: string;
    desc: string;
    icon: React.ReactNode;
    formConfig: FormConfig;
  }>;
}

/**
 * 登录页布局组件（通用版）
 * 不依赖路由，通过props传入右侧内容
 */
const LoginLayout: React.FC<LoginLayoutProps> = ({
  // content,
  logoText = '智慧科研平台',
  descriptionText = '智慧管理，无忧共享！大型仪器共享管理系统——全流程在线化、智能化调度、专业运维保障，\n让仪器共享更高效、更透明、更安心！构建科研仪器共享生态圈',
  style,
  className,
  ssoLoginUrl,
  otherLoginTypes,
  currentView,
  leftBackgroudImg,
  logoUrl,
  onViewChange,
  outLoginSubmit,
  registerTypeList,
}) => {
  const [registerType, setRegisterType] = useState<string>('user');

  const handleBackToLogin = () => {
    onViewChange?.('login');
  };

  const handleRegisterTypeSelect = (type: string) => {
    setRegisterType(type);
    onViewChange?.('registerform');
  };
  return (
    <div className={`login-container ${className || ''}`} style={style}>
      {/* 左侧背景区域 - 固定不变 */}
      <div className="login-left" style={{ backgroundImage: `url(${leftBackgroudImg})`, backgroundSize: '100% 100%', }}>
        <div className="login-logo">{logoText}</div>
        <div className="login-description">
          {descriptionText}
        </div>
        {logoUrl && <img className="login-logo-img" src={logoUrl} alt={logoText} />}
      </div>
      {/* 右侧内容区域 - 根据状态显示不同组件 */}
      <div className="login-right">
        {/* 根据当前视图显示不同组件 */}
        {currentView === 'login' && (
          <Login 
            ssoLoginUrl={ssoLoginUrl} 
            otherLoginTypes={otherLoginTypes} 
            onRegisterClick={() => onViewChange?.('registertype')} 
          />
        )}
        {currentView === 'registertype' && (
          <RegisterType onBack={handleBackToLogin} onRegisterClick={handleRegisterTypeSelect} registerTypeList={registerTypeList}/>
        )}
        {currentView === 'outlogin' && (
          <OutLogin onBack={handleBackToLogin} onSubmit={outLoginSubmit} />
        )}
        {currentView === 'registerform' && (
          <RegisterForm onBack={(type:ViewType) => onViewChange?.(type)} registerType={registerType} formConfig={registerTypeList?.find(item => item.key === registerType)?.formConfig || { items: [], onSubmit: () => {} }} />
        )}  
      </div>
    </div>
  );
};

export default LoginLayout;